<template>
    <div id="main" style="width: 1500px;height: 600px;">


    </div>
</template>

<script>
import * as echarts from 'echarts';
import request from '@/utils/request';

export default {
  name: "ECharts",
  data() {
    return {
      list: [],
      courseName: [],
      courseChooseNumber: []
    }
  },
  mounted() {

    // 基于准备好的dom，初始化echarts实例
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      title: {
        text: '热门选修排行榜(前十)',
        textStyle: {fontSize: 28, color: "#ff0000",},
        // left:"center"

      },
      tooltip: {},
      dataset: {

        source: [
          ['score', 'amount', 'product'],
          // [89.3, 58212, '34 Latte'],
          // [57.1, 78254, 'Milk Tea'],
          // [74.4, 41032, 'Cheese Cocoa'],
          // [50.1, 12755, 'Cheese Brownie'],
          // [89.7, 20145, 'Matcha Cocoa'],
          // [68.1, 79146, 'Tea'],
          // [19.6, 91852, 'Orange Juice'],
          // [10.6, 101852, 'Lemon Juice'],
          // [32.7, 20112, 'Walnut Brownie']

        ]
      },
      grid: {containLabel: true},
      xAxis: {
        name: '已选人数',
        axisLabel: {textStyle: {fontSize: 20}}
      },
      yAxis: {
        name: '课程名称',
        type: 'category',

        axisLabel: {textStyle: {fontSize: 20}}
      },
      visualMap: {
        show: false,
        orient: 'horizontal',
        // left: 'center',
        min: 40,
        max: 250,
        // text: ['High', 'Low'],
        // Map the score column to color
        dimension: 0,
        inRange: {
          color: ['#65B581', '#FFCE34', '#FD665F']
        }
      },
      series: [{
        type: 'bar',
        encode: {
          // Map the "amount" column to X axis.
          x: 'amount',
          // Map the "product" column to Y axis
          y: 'product'
        }
      }]
    };

    request.get("/course/echarts").then(res => {
      console.log(res)
      option.yAxis.data = res.data.y
      option.series[0].data = res.data.x
      option && myChart.setOption(option);

    })


  },
  created() {
    this.load();
  },
  methods: {
    load() {

    }
  }

}
</script>

<style scoped>

</style>
